<template>
	<view class="status_bar">
		<!-- 这里是状态栏 -->
	</view>
	<view class="account-book">
		<uni-nav-bar :border="false" left-icon="left" :right-icon="deleteFlag?'undo':'trash-filled'" @clickLeft="back"
			@clickRight="()=>{deleteFlag?deleteCancel():deleteFn()}">
			<view class="title">
				<text class="text">账本管理</text>
			</view>
		</uni-nav-bar>
		<view v-for="i in books" class="books" @click="()=> deleteFlag?selectBook(i) :{}">
			<image class="list-item-image" mode="aspectFill" :src="defImg(i)"></image>
			<view class="list-item">
				<view class="list-item-top">
					<text class="name">{{i.name}}</text>
					<uni-icons class="select-icon" v-show="deleteFlag" :type=" i.selected?'checkbox-filled':'checkbox'"
						size="25"></uni-icons>
					<uni-icons type="compose" v-show="!deleteFlag" size="35" color="#fff"
						@click="()=>goTo('addAccountBook','edit',i)"></uni-icons>
				</view>
				<view class="account">累计：{{i.sumPen}}笔</view>
				<view> <text>总支出：{{i.totalExpenditure}} </text> &emsp;<text>总收入：{{i.generalIncome}}</text>
					<text class="defaulted" @click="()=>setDefault(i)">
						<radio :checked="i.defaulted==='1'" style="transform:scale(0.7)" />
						{{ /* i.defaulted=='1'?"默认" : */'设为默认'}}
					</text>
				</view>
			</view>
		</view>
		<view class="save-btn " @click="()=> deleteFlag?doDeleteFn() : goTo('addAccountBook')">
			<text class="save-btn-text">
				{{ deleteFlag? '确认删除':'新建账本'}}</text>
		</view>

		<uni-popup ref="alertDialogRef" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="同意" title="提示" :content=" messageText "
				@confirm="dialogOk" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="popUpRemarkRef" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入密码" value=""
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>

	</view>

</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import { accountBookApi } from "@/apis/apis"
	import { userStore } from '@/store/user'

	const defImg = (i : any) => {
		try {
			return 'http://192.168.3.200:8082/universal/img/' + i.accountBookFList.find((item : any) => item.confirm == '1').img || '../../static/image/account-bg.jpg'
		} catch (error) {
			console.log(error);
			return '../../static/image/account-bg.jpg'
		}
	}


	const books = ref([
		{
			name: '默认账本1', sumPen: '7', totalExpenditure: '0.00'
			, generalIncome: '0.00',
			accountBookFList: [{ img: '../../static/image/account-bg.jpg', confirm: '1' }],
			selected: false, defaulted: '1'
		}
	])



	// 初始化请求账本
	const getAccountBook = async () => {
		const res : any = await accountBookApi.queryPageUsingPOST({})

		books.value = res.data.records

	}

	onShow(() => {
		getAccountBook()
	});


	const setDefault = async (i : any) => {
		const res : any = await accountBookApi.updateDefaultedUsingPOST({
			defaulted: '1',
			id: i.id,
		})
		if (res.code === 200) {
			uni.showToast({ title: res.msg, icon: 'success' });
			getAccountBook()
		}
	}
	const popUpRemarkRef = ref(null)


	const deleteFlag = ref(false)
	const deleteFn = () => {
		deleteFlag.value = true
	}
	const doDeleteFn = () => {
		if (books.value.some((item : any) => item.selected && item.defaulted == 1)) return uni.showToast({
			title: '默认账本不能删除！', icon: 'error'
		})
		alertDialogRef.value.open()
	}


	const messageText = `是否删除！`
	const alertDialogRef = ref(null)


	const selectBook = (e : any) => {
		e.selected = !e.selected
	}
	const deleteCancel = () => {
		books.value.forEach((item : any) => item.selected = false)
		deleteFlag.value = false
	}
	const dialogOk = () => {
		popUpRemarkRef.value.open()
	}
	const deleteOk = async (password : string) => {
		const ids = []
		books.value.forEach((item : any) => item.selected && ids.push(item.id))
		const res : any = await accountBookApi.deleteUsingGET({
			ids: ids.join(','),
			password: password
		})
		if (res.code === 200) {
			uni.showToast({ title: res.msg, icon: 'success' });
			getAccountBook()
			deleteCancel()
			dialogClose()

		}
	}

	// password
	const dialogInputConfirm = async (password : string) => {
		deleteOk(password)
	}
	const dialogClose = () => {
		alertDialogRef.value.close()

	}
	const back = () => {
		uni.navigateBack()
	}
	const goTo = (type : string, edit ?: string, i ?: any) => {
		userStore.setCurrentEditBook(null)
		if (edit === 'edit') {

			userStore.setCurrentEditBook(i)

		}
		// 使用唯一的事件名称
		uni.navigateTo({
			url: `/pages/accountBook/${type}/${type}?edit=${edit}`,
		}
		)

	}
</script>

<style lang="scss">
	$nav-height: 44px;

	.account-book {
		padding: 10px;
		color: #fff;


		.title {
			width: 100%;

			text-align: center;
			height: $nav-height;
			line-height: $nav-height;

			.text {
				font-size: 16px;
			}
		}

		.books {
			// width: 100%;
			margin: 0 auto 10px;
			padding: 10px;
			/* 关键定位 */
			position: relative;

			/* 防止图片溢出 */
			overflow: hidden;

			.select-icon {
				position: absolute;
				top: 2px;
				right: 2px;
			}

			.list-item-image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			.list-item {
				// width: 100%;

				.list-item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 20px;
					}
				}

				.account {
					margin-bottom: 5px;
				}

				.defaulted {
					font-size: 14px;
					float: right;
				}
			}
		}
	}
</style>